import { Badge, ListGroup } from "react-bootstrap";


export interface Topic {
    title: string,
    summary: string,
    disabled: boolean,
};

interface Input {
    items: Array<Topic>,
    deleteTopic: Function,
    restoreTopic: Function,
    itemsLoaded: boolean,
};

export const TopicsList = ({items, deleteTopic, restoreTopic, itemsLoaded}: Input) => {
    return (
        <ListGroup as="ol" numbered>
            {
                items.map((item, i) => {
                    return (
                        <ListGroup.Item
                            as="li"
                            className={
                                "d-flex justify-content-between align-items-start" +
                                (item.disabled ? ' list-group-item-light' : '')
                            }

                        >
                            <div className="ms-2 me-auto">
                                <div className="fw-bold">{item.title}</div>
                                {item.summary}
                            </div>
                            {
                                itemsLoaded ? (
                                    !item.disabled ? (
                                        <Badge bg="danger" role="button" pill onClick={()=>{deleteTopic(i)}}>
                                        удалить
                                        </Badge>
                                    ) : (
                                        <Badge bg="secondary" role="button" pill onClick={()=>{restoreTopic(i)}}>
                                            вернуть
                                        </Badge>
                                    )
                                ) : ''
                            }
                        </ListGroup.Item>
                    );
                })
            }
        </ListGroup>
    );
};
